<template>
  <view class="pinkorder">
    <view class="navbar1">
      <view class="iconfont icon-xiangzuo"
            @tap='returns'></view>
      <text>发团订单</text>
    </view>
    <view style="height:96rpx"></view>
      <v-tabs class="tab" v-model="current"
            :tabs="tabs"
            @change="changeTab"></v-tabs>
    <block v-for="(item,index) in pinkList" :key="index">
    <view class="orderdetail" v-if="current == 0 || current ==item.status">
      <view class="list acea-row row-between-wrapper">
        <text>订单号: {{item.product.spu}}</text>
        <text class="cr" v-if="item.status == 1">待拼团</text>
        <text class="cr" v-if="item.status == 2">已完成</text>
        <text class="cr" v-if="item.status == 3">拼团失败</text>
      </view>
      <view class='goodWrapper'>
			  <view class='item acea-row row-between-wrapper'>
				<view class='pictrue'>
					<image :src='item.product.image'></image>
				</view>
				<view class='text'>
					<view class='acea-row row-between-wrapper'>
						<view class='name line1'>{{item.product.store_name}}</view>
						<view class='num'>{{item.product.pink_type}}人团</view>
					</view>
					<view class="acea-row row-between-wrapper">
            <text class='money font-color'>{{item.product.pink_price}}发团点</text>
            <text class='money font-color'>{{(item.people-item.pink_people >0) ? '还差' + (item.people-item.pink_people) + '人' : '拼团成功'}}</text>
          </view>
          
				</view>
			  </view>
        <view class="acea-row row-between-wrapper">
          <view class='initiator'>
            <image class="avatars" :src="item.avatar" />
            <text>{{item.nickname}}</text>
					</view>
          <button class="btn" @click="getDetail">订单详情</button>
        </view>
		  </view>
    </view>
    </block>
  
      <view v-if="pinkList.length == 0">
        <emptyPage title="暂无订单~"></emptyPage>
    </view>
  </view>
</template>

<script>
import {getPinklaunchList} from '@/api/order.js'
import stoptimer from '@/components/stopTimer/stopTimer.vue'
import emptyPage from '@/components/emptyPage.vue'
import Vtabs from '@/components/v-tabs/v-tabs.vue'
  export default {
    props:['change'],
    data() {
      return {
        pinkList: [],
        tabs: [
          '全部','待拼团','拼团成功','拼团失败'
        ],
        current: 0,
        index: 0
      }
    },
    components: {
      stoptimer,
      Vtabs,
      emptyPage
    },
    created() {
      this.getorderlist()
      console.log(this.change);
    },
    methods: {
      returns() {
        uni.navigateBack();
      },
      callback() {
        console.log(1);
      },
      getorderlist() {
        let that = this
        getPinklaunchList().then(res => {
          console.log(res);
          this.pinkList = res.data.pinkList
          console.log(this.cartInfo);
        })
      },
      getDetail() {
        this.$util.Tips({title:'开发中，敬请期待！'})
      },
      changeTab(index) {
        this.current = index
      }
    }
  }
</script>

<style>
.pinkorder {
  padding-bottom: 30rpx;
}
.goodWrapper {
  background-color: #f7f7f7;
  padding-bottom: 10rpx;
  border-radius: 14rpx;
}
.orderdetail {
 background-color: #f7f7f7;
  margin-top: 30rpx;
  border-radius: 14rpx;
}
.cr {
  color: red;
}
.tab {
  text-align: center;
}
.list {
  padding: 20rpx 20rpx;
}
.initiator {
  margin-left: 30rpx;
}
.avatars {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 20rpx;
  }
.btn {
  width: 220rpx;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  background-color: #EF271E;
  color: #fff;
  margin: 20rpx 20rpx 20rpx 0;
}
</style>